{% extends "school_base.html" %}

{% block headblock %}
<script src="{{ MEDIA_URL }}/js/autoNumeric-1.6.2.js" type="text/javascript" charset="utf-8"></script>
{% endblock %}

{% block scriptblock %}

$(function(){
        $('.remove-sponsor-from-school-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            position: 'center',
            buttons: {
                "Remove Sponsor": function() {
					$.post(
						"ajax/remove-sponsor-from-school",
						{'sponsor_pk': $(this).attr("sponsor")},
						function(data) {
				  			// remove the sponsor from display
				  			$('#sponsor_' + data.sponsor_pk).remove();
				  			$('#buttons_sponsor_' + data.sponsor_pk).remove();
				  			update_fees_table();
						},
						"json"
					);
                   	$(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
        
        $('.remove-sponsor-from-conference-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            position: 'center',
            buttons: {
                "Remove Sponsor": function() {
					$.post(
						"ajax/remove-sponsor-from-conference",
						{'sponsor_pk': $(this).attr("sponsor")},
						function(data) {
				  			// remove the sponsor from display
				  			$('#sponsor_' + data.sponsor_pk).remove();
				  			$('#buttons_sponsor_' + data.sponsor_pk).remove();
				  			update_fees_table();
				  			
				  			if(data.sponsor_pk == "{{ user.faculty_sponsor.pk }}") {
				  				$('#add_sponsor_buttons').prepend('<a id="add_me" class="button" href="add-me">Add Me</a>');
				  				$( ".button" ).button();
				  			} else {
				  				if ($("#register-sponsors").length == 0) {
				  					$("#add_sponsor_dialog").append('<div id="register-sponsors"><p><b>Register Sponsor for {{ conference.name }}:</b></p></div>');
				  				}
				  				$("#register-sponsors").append('<a href="javascript:void(0);" onclick="add_sponsor_to_conference(' + data.sponsor_pk + ')" id="add-sponsor-' + data.sponsor_pk + '">' + data.sponsor_name + '</a><br/>');
				  			}
						},
						"json"
					);
                   	$(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });

        $('.add-sponsor-dialog').dialog({
            autoOpen: false,
            width: 500,
            modal: true,
            resizable: false,
            position: 'center',
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        });
});

function add_sponsor_to_conference(sponsor_pk) {
	$.post(
			"ajax/add-sponsor-to-conference",
			{'sponsor_pk': sponsor_pk},
			function(data) {
				window.location.reload(true);
			},
			"json"
	);
	return false;
}

function toggle_country_preferences_buttons() {
	$('#update-country-preferences').toggle();
	$('#save-country-preferences').toggle();
	$('#cancel-country-preferences').toggle();
}

function open_country_preferences_form() {
	$.get(
			"ajax/get-country-preferences",
			function(data) {
				// build the form
				output = "<h3>Country Preferences</h3>";
				
				if(data.available_countries.length > 0) {
					output += "<p>Countries listed in the drop-down boxes are currently available. They have not yet been assigned to any school.</p>";
					
					output += "<table>";
					for(i = 1; i <= 10; i++) {
						output += "<tr><td>" + i + "</td><td><select id=\"id_pref_" + (i-1) + "\" name=\"pref_" + (i-1) + "\"><option value=\"-1\"> </option>";
						output += data.available_countries;
						output += "</select></td></tr>";
					}
					output += "</table>";					
				} else {
					output += "<i>No countries are currently available for selection.</i>";
				}
				output += "<p><a href=\"downloads/?country-committee-assignments\">Download country-committee assignments here.</a></p>";
				output += "<h3>Delegate Request</h3><p>Total delegates requested: <input type=\"text\" class=\"auto\" name=\"total_count\" size=\"5\" value=\"" + data.delegate_count + "\" /></p>";
								
	  			// switch to country preferences form
				$('#country-preferences-form').html(output);
				
				for(i = 0; i < data.preferences.length; i++) {
					$('#id_pref_'+i+' option[value='+data.preferences[i]+']').attr('selected','selected');
				}
				
				toggle_country_preferences_buttons();
				$('input.auto').each(function() {
					$(this).autoNumeric();
				});
			},
			"json"
	);
	$('#country-preferences-form').html('<p style="text-align: center" class="loading"><img src="{{MEDIA_URL}}/icons/ajax-loader.gif"/><br/><br/>Loading...</p>');
}

function cancel_country_preferences_form() {
	$.get(
		"ajax/get-country-preferences-html-ajax",
		function(data) {
			$('#country-preferences-form').html(data.prefs);
			toggle_country_preferences_buttons();
		},
		"json"
	);
	$('#country-preferences-form').html('<p style="text-align: center" class="loading"><img src="{{MEDIA_URL}}/icons/ajax-loader.gif"/><br/><br/>Loading...</p>');
}

function save_country_preferences_form() {
	$('#country-preferences-form').ajaxSubmit({
		dataType:'json',
		beforeSubmit: 	function(arr, $form, options) { 
			$('#country-preferences-form').html('<p style="text-align: center" class="loading"><img src="{{MEDIA_URL}}/icons/ajax-loader.gif"/><br/><br/>Loading...</p>');
		},
		success:		function(data) {
			$('#country-preferences-form').html(data.prefs);
			toggle_country_preferences_buttons();
			update_fees_table();
		},
		error:			function() {
			cancel_country_preferences_form();
		}
	});
}

function toggle_school_mailing_address_buttons() {
	$('#edit_mailing_address').toggle();
	$('#save_mailing_address').toggle();
}

function get_school_mailing_address_form() {
	$.get(
		"ajax/get-school-mailing-address-form",
		function(data) {
  			// switch to school mailing address form
  			output = "<form action=\"\" method=\"post\" id=\"school_mailing_address_form\">";
			output += data.form;
			output += "</form>";
			$('#mailing_address').html(output);
			toggle_school_mailing_address_buttons();
			form_styling();
		},
		"json"
	);
}

function send_school_mailing_address_form() {
	form_data = $('#school_mailing_address_form').find(":input").serializeArray();
	$.post(
		'ajax/save-school-mailing-address-form',
		form_data,
		function(data) {
			if(data.form != null) {
	  			// re-load school mailing address form with errors
	  			output = "<form action=\"\" method=\"post\" id=\"school_mailing_address_form\">";
				output += data.form;
				output += "</form>";
				$('#mailing_address').html(output);
				form_styling();
			} else {
				$('#mailing_address').html("<p>" + data.new_school_mailing_address + "</p>");
				toggle_school_mailing_address_buttons();
			}
		},
		'json'
	);
}

function toggle_sponsor_buttons(sponsor_pk) {
	$('#edit_sponsor_'+sponsor_pk).toggle();
	$('#save_sponsor_'+sponsor_pk).toggle();
}

function get_edit_sponsor_form(sponsor_pk) {
	$.post(
		"ajax/get-edit-sponsor-form",
		{'sponsor_pk':sponsor_pk},
		function(data) {
  			// switch to edit sponsor form
  			output = "<form action=\"\" method=\"post\" id=\"sponsor_form_" + data.sponsor_pk + "\">";
			output += data.form;
			output += "</form>";
			$('#sponsor_'+data.sponsor_pk).html(output);
			form_styling();
			toggle_sponsor_buttons(data.sponsor_pk);
		},
		"json"
	);
}

function send_edit_sponsor_form(sponsor_pk) {
	form_data = $('#sponsor_form_' + sponsor_pk).find(":input").serializeArray();
	$.post(
		'ajax/save-edit-sponsor-form',
		form_data,
		function(data) {
			if(data.form != null) {
	  			// re-load sponsor form with errors
	  			output = "<form action=\"\" method=\"post\" id=\"sponsor_form_" + data.sponsor_pk + "\">";
				output += data.form;
				output += "</form>";
				$('#sponsor_'+data.sponsor_pk).html(output);
				form_styling();
			} else {
				output = "<b>" + data.full_name + "</b>";
				if("{{ user.username }}" == data.username) {
					output += "<small><i>(This is you)</i></small>";
				}
				output += "<br/>E-mail Address: <a href=\"mailto:" + data.email + "\">" + data.email + "</a><br/>";
				output += "Phone Number: " + data.phone + "<br/>";
				$('#sponsor_'+data.sponsor_pk).html(output);
				toggle_sponsor_buttons(data.sponsor_pk);
			}
		},
		'json'
	);
}

function get_edit_delegate_form(position_pk) {
	$.post(
		"ajax/get-edit-delegate-form",
		{'position_pk':position_pk},
		function(data) {
  			// switch to edit delegate form
  			output = "<form action=\"\" method=\"post\" id=\"delegate_form_" + data.position_pk + "\">";
			output += data.form;
			output += "</form>";
			$('#delegate-info-'+data.position_pk).html(output);
			form_styling();
			
			$('#edit-delegate-'+position_pk).hide();
			$('#remove-delegate-'+position_pk).hide();
			$('#save-delegate-'+position_pk).show();
			$('#add-delegate-'+position_pk).hide();
		},
		"json"
	);
	return false;
}

function send_edit_delegate_form(position_pk) {
	form_data = $('#delegate_form_' + position_pk).find(":input").serializeArray();
	form_data.push({name:"position_pk",value:position_pk});
	$.post(
		'ajax/edit-delegate',
		form_data,
		function(data) {
			if(data.form != null) {
	  			// re-load delegate form with errors
	  			output = "<form action=\"\" method=\"post\" id=\"delegate_form_" + data.position_pk + "\">";
				output += data.form;
				output += "</form>";
				$('#delegate-info-'+data.position_pk).html(output);
				form_styling();
				
				$('#edit-delegate-'+position_pk).hide();
				$('#remove-delegate-'+position_pk).hide();
				$('#save-delegate-'+position_pk).show();
				$('#add-delegate-'+position_pk).hide();
			} else {
				$('#delegate-info-'+data.position_pk).html(data.name);
				
				$('#edit-delegate-'+position_pk).show();
				$('#remove-delegate-'+position_pk).show();
				$('#save-delegate-'+position_pk).hide();
				$('#add-delegate-'+position_pk).hide();
				
				update_fees_table();
			}
		},
		'json'
	);
	return false;
}

function remove_delegate(position_pk) {
	$.post(
		"ajax/remove-delegate",
		{'position_pk':position_pk},
		function(data) {
			$('#delegate-info-'+data.position_pk).html("No delegate registered");

			$('#edit-delegate-'+position_pk).hide();
			$('#remove-delegate-'+position_pk).hide();
			$('#save-delegate-'+position_pk).hide();
			$('#add-delegate-'+position_pk).show();
			
			update_fees_table();
		},
		"json"
	);
	return false;
}

function update_fees_table() {
	$.post(
		"fees",
		{},
		function(data) {
			$('#fees-table').replaceWith(data);
		},
		"html"
	);
}

{% endblock %}

{% block pagecontent %}
<div class="header">
<h1>{{ conference.name }} Registration</h1>
<h3>{{ school.name }}</h3>
</div>

<div class="school-content">
<div id="tabs" class="ui-layout-center">
	<ul>
		<li><a href="#contacts">Contacts</a></li>
		<li><a href="#register">Register</a></li>
		<li><a href="#delegations">Delegations</a></li>
		<li><a href="#fees">Fees</a></li>
	</ul>

	<div id="contacts">
		<h3>School Mailing Address</h3>
			<div id="mailing_address"><p>{% autoescape off %}{{ school.get_html_mailing_address }}{% endautoescape %}</p></div>
			<p>
				<button id="edit_mailing_address" class="button" onclick="get_school_mailing_address_form()">Edit</button>
				<button id="save_mailing_address" class="button" style="display: none" onclick="send_school_mailing_address_form()">Save</button>
			</p>
	
		<h3>Faculty Sponsors</h3>
			{% for sponsor in sponsors %}
				<div id="sponsor_{{sponsor.pk}}">
					<b>{{ sponsor.user.get_full_name }} </b>
					{% if sponsor.user.username == user.username %}
						<small><i>(This is you)</i></small>
					{% endif %}
					<br/>
					E-mail Address: <a href="mailto:{{sponsor.user.email}}">{{ sponsor.user.email }}</a><br/>
					Phone Number: {{ sponsor.phone }}<br/>
				</div>
				<p id="buttons_sponsor_{{sponsor.pk}}">
					{% load userfilters %}
					{% if user.is_staff or user|is_secretariat_member or sponsor.user.username == user.username %}
						<button id="edit_sponsor_{{sponsor.pk}}" class="button" onclick="get_edit_sponsor_form({{ sponsor.pk }})">Edit</button>
					{% endif %}
					<button id="save_sponsor_{{sponsor.pk}}" class="button" style="display: none" onclick="send_edit_sponsor_form({{sponsor.pk}})">Save</button>
					<button id="remove_sponsor_from_conference_{{sponsor.pk}}" class="button" onclick="$('#remove_sponsor_from_conference_confirm_{{sponsor.pk}}').dialog('open')">Remove From Conference</button>
					
					{% if sponsor.user.username != user.username %}
						<button id="remove_sponsor_from_school_{{sponsor.pk}}" class="button" onclick="$('#remove_sponsor_from_school_confirm_{{sponsor.pk}}').dialog('open')">Revoke Access</button>
						
						<div style="display: none" id="remove_sponsor_from_school_confirm_{{sponsor.pk}}" class="remove-sponsor-from-school-dialog" title="Remove Faculty Sponsor From School" sponsor="{{sponsor.pk}}">
							<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Please confirm that you want to remove {{sponsor.user.get_full_name}} from this school. Removing this sponsor will revoke their access to {{school.name}}, and they will not be notified.</p>
						</div>
					{% endif %}
					<div style="display: none" id="remove_sponsor_from_conference_confirm_{{sponsor.pk}}" class="remove-sponsor-from-conference-dialog" title="Remove Faculty Sponsor From Conference" sponsor="{{sponsor.pk}}">
						<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Please confirm that you want to remove {{sponsor.user.get_full_name}} from this conference registration and that this sponsor will not be attending the conference. This sponsor will still be able to access this school's registration data.</p>
					</div>
				</p>

			{% endfor %}

			<br/><br/>	
			<div id="add_sponsor_buttons">
				{% load listfilters %}
				{% if conference|not_in_list:user.faculty_sponsor.conferences %}
					<a id="add_me" class="button" href="add-me">Add Me</a>
				{% endif %}
				<button id="add_sponsor" class="button" onclick="$('.add-sponsor-dialog').dialog('open')">Add Sponsor</button>
				<div style="display: none" id="add_sponsor_dialog" class="add-sponsor-dialog" title="Grant Access to Faculty Sponsor">
					<p><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span> All faculty sponsors must have a user account on this site. To grant school registration access to another sponsor, give them this access code. Once they create an account and go to this school's page, they will be asked for this code.</p>
					<p><b>Access Code</b>: {{ school.access_code }}</p>
					{% if other_sponsors|length > 0 %}
						<div id="register-sponsors"><p><b>Register Sponsor for {{ conference.name }}:</b></p>
						{% for sponsor in other_sponsors %}
								<a href="javascript:void(0);" onclick="add_sponsor_to_conference({{ sponsor.pk }})" id="add-sponsor-{{ sponsor.pk }}">{{ sponsor.user.get_full_name }}</a><br/>
						{% endfor %}
						</div>
					{% endif %}
				</div>
			</div>
	</div>
	
	<div id="register">
		<form action="ajax/set-country-preferences" method="post" id="country-preferences-form">
		{% autoescape off %}{{ country_preferences }}{% endautoescape %}
		</form>
		<p>
		<button id="update-country-preferences" class="button" onclick="open_country_preferences_form()">Update</button>
		<button id="save-country-preferences" class="button" style="display: none" onclick="save_country_preferences_form()">Save</button>
		<button id="cancel-country-preferences" class="button" style="display: none" onclick="cancel_country_preferences_form()">Cancel</button>
		</p>
	</div>

	<div id="delegations">

		<table>
		{% for country,positions in delegations %}
			<tr>
				<td style="padding-right:10px">{% if country.flag_icon %}<img src="{{ MEDIA_URL }}/{{ country.flag_icon }}"/>{% endif %}</td>
				<td><b>{{ country.name }}</b></td>
			</tr>
			{% for position in positions %}
				<tr><td></td><td>
				{% if position.first_name %}
					<!-- Delegate object -->
					{{ position.position_assignment.committee.name }}: <span id="delegate-info-{{ position.position_assignment.pk }}">{{ position.get_full_name }}</span> 
					<small>
						&nbsp; &nbsp;<a onclick="get_edit_delegate_form({{ position.position_assignment.pk }})" id="edit-delegate-{{ position.position_assignment.pk }}" href="javascript:void(0);">Edit</a>  
						&nbsp; &nbsp;<a onclick="remove_delegate({{ position.position_assignment.pk }})" id="remove-delegate-{{ position.position_assignment.pk }}" href="javascript:void(0);">Remove</a>
						&nbsp; &nbsp;<a style="display: none" onclick="send_edit_delegate_form({{ position.position_assignment.pk }})" id="save-delegate-{{ position.position_assignment.pk }}" href="javascript:void(0);">Save</a>
						&nbsp; &nbsp;<a style="display: none" onclick="get_edit_delegate_form({{ position.position_assignment.pk }})" id="add-delegate-{{ position.position_assignment.pk }}" href="javascript:void(0);">Register</a>
					</small>
				{% else %}
					<!-- DelegatePosition object -->
					{{ position.committee.name }}: <span id="delegate-info-{{ position.pk }}">No delegate registered</span>
					<small>
						&nbsp;<a style="display: none" onclick="get_edit_delegate_form({{ position.pk }})" id="edit-delegate-{{ position.pk }}" href="javascript:void(0);">Edit</a>  
						&nbsp;<a style="display: none" onclick="remove_delegate({{ position.pk }})" id="remove-delegate-{{ position.pk }}" href="javascript:void(0);">Remove</a>
						<a style="display: none" onclick="send_edit_delegate_form({{ position.pk }})" id="save-delegate-{{ position.pk }}" href="javascript:void(0);">Save</a>
						<a onclick="get_edit_delegate_form({{ position.pk }})" id="add-delegate-{{ position.pk }}" href="javascript:void(0);">Register</a>
					</small>
				{% endif %}
				</td></tr>
			{% empty %}
				No positions have been assigned to this country.
			{% endfor %}
		{% empty %}
			<tr><td>
			No countries have been assigned to your school.
			</td></tr>
		{% endfor %}
		</table>		
	</div>

	<div id="fees">
		<h3 style="margin: 0; font-size: 100%;">Download Invoice:</h3>
		<table class="center">
			<tr>
				<td class="center" style="padding-right: 30px">
					<a href="invoice"><img class="tab-link" src="{{MEDIA_URL}}/icons/pdf.png"/></a><br/>
					<a href="invoice">Download PDF</a>
				</td>
				<td class="center">
					<a href="invoice-doc"><img class="tab-link" src="{{MEDIA_URL}}/icons/doc.png"/></a><br/>
					<a href="invoice-doc">Download Word Doc</a>
				</td>
			</tr>
		</table>
		<br/>
		{% autoescape off %}{{ fees_table }}{% endautoescape %}
		<p><i>Note:</i> Fees listed above reflect the number of delegates registered in the Delegations tab, not the number of delegate positions requested. If you need an invoice before registering your delegates, <a href="invoice-from-request">click here</a> to download an invoice based on the number of delegate positions you requested with your country preferences.</p>
	</div>
</div>
</div>
{% endblock %}
